<template>
  <div id="map-container"></div>
</template>
<script setup lang='ts'>
import { onMounted } from 'vue';
import 'ol/ol.css'
import { Map, View, Feature } from 'ol'
import { useTianTileLayer, projection } from '@/hooks'
import { TiandiTileLayerConfigEnum } from '@/enum'
import VectorSource from 'ol/source/Vector'
import { Vector as VectorLayer } from 'ol/layer'
import { Point as GeomPoint } from 'ol/geom'
import { Style, Icon as StyleIcon, Circle as StyleCircle, Fill as StyleFill, Stroke as StyleStroke } from 'ol/style'
import { GeoJSON } from 'ol/format'
import WebGLPointsLayerRenderer from 'ol/renderer/webgl/PointsLayer'
import Layer from 'ol/layer/Layer'
import { WebGLPoints } from 'ol/layer'

let map: Map

onMounted(() => {
  initMap()
})

// 初始化地图
function initMap() {
  map = new Map({
    target: 'map-container',
    layers: [ ...useTianTileLayer(TiandiTileLayerConfigEnum.SL) ],
    view: new View({
      center: [0, 0],
      projection: projection,
      zoom: 3,
      maxZoom: 17,
      minZoom: 1
    })
  })
  getCoordinate()
}

// 获取海量数据
async function getCoordinate() {
  const geojson = await fetch('https://openlayers.org/en/latest/examples/data/geojson/world-cities.geojson').then(res => res.json())
  // const target = []
  // for(let i = 0; i < 10000; i++) {
  //   target.push([generateRandomLong(), generateRandomLat()])
  // }
  // console.log(geojson, 'geojson-->>')
  addGeoJson(geojson)
}

function addGeoJson(geojson: any) {
  const vectorSource = new VectorSource({
    features: new GeoJSON().readFeatures(geojson)
  })
  const vectorLayer = new VectorLayer({
    source: vectorSource
  })
  vectorLayer.setStyle(new Style({
    image: new StyleCircle({
      radius: 1,
      fill: new StyleFill({
        color: 'red'
      })
    })
  }))
  map.addLayer(vectorLayer)
}

// 随机生成经度
function generateRandomLong() {
  return Number((Math.random() * 360 - 180).toFixed(3));
}

// 随机生成纬度
function generateRandomLat() {
  return Number((Math.random() * 180 - 90).toFixed(3));
}
</script>
<style scoped>
#map-container {
  width: 100%;
  height: 100%;
}
</style>